<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-form">
  <h2>Configuration</h2>
  <div class="gv-form-content" layout="column">
    <div layout="column">
      <md-input-container class="md-block" flex-gt-xs>
        <label>Client Id</label>
        <input ng-model="$ctrl.identityProvider.configuration.clientId" type="text" required>
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>Client Secret</label>
        <input ng-model="$ctrl.identityProvider.configuration.clientSecret" type="text" required>
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>Token Endpoint</label>
        <input ng-model="$ctrl.identityProvider.configuration.tokenEndpoint" type="url" required>
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>Token Introspection Endpoint</label>
        <input ng-model="$ctrl.identityProvider.configuration.tokenIntrospectionEndpoint" type="url">
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>Authorize Endpoint</label>
        <input ng-model="$ctrl.identityProvider.configuration.authorizeEndpoint" type="url" required>
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>UserInfo Endpoint</label>
        <input ng-model="$ctrl.identityProvider.configuration.userInfoEndpoint" type="url" required>
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>User Logout Endpoint</label>
        <input ng-model="$ctrl.identityProvider.configuration.userLogoutEndpoint" type="url">
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>Scopes</label>
        <md-chips ng-model="$ctrl.identityProvider.configuration.scopes"
                  md-add-on-blur="true"
                  placeholder="Enter a scope and press Enter"></md-chips>
      </md-input-container>

      <label>Authentication button color</label>
      <div flex
           md-color-picker="$ctrl.buttonConfig"
           ng-model="$ctrl.identityProvider.configuration.color"
           md-color-history="true">
      </div>
    </div>
  </div>
</div>

<div class="gv-form">
  <h2>User profile mapping</h2>
  <div class="gv-form-content" layout="column">
    <div layout="column">
      <md-input-container class="md-block" flex-gt-xs>
        <label>ID</label>
        <input ng-model="$ctrl.identityProvider.userProfileMapping.id" type="text" placeholder="sub" required>
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>First name</label>
        <input ng-model="$ctrl.identityProvider.userProfileMapping.firstname" type="text" placeholder="given_name">
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>Last name</label>
        <input ng-model="$ctrl.identityProvider.userProfileMapping.lastname" type="text" placeholder="family_name">
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>Email</label>
        <input ng-model="$ctrl.identityProvider.userProfileMapping.email" type="text" placeholder="email">
      </md-input-container>

      <md-input-container class="md-block" flex-gt-xs>
        <label>Picture</label>
        <input ng-model="$ctrl.identityProvider.userProfileMapping.picture" type="text" placeholder="picture">
      </md-input-container>
    </div>
  </div>
</div>
